<#import "/macro.ftl" as m>
<@m.page_header title='后台' />
<div id="page-content-wrapper">

    <div id="page-title">
        <h3>
            产品模板
        </h3>
        <div id="breadcrumb-right">
            <div class="float-right">
                <a href="/products/template/add" class="btn medium primary-bg">
                    <span class="button-content">
                    <i class="glyph-icon icon-cog float-left"></i>
                    添加
                    </span>
                </a>
            </div>
        </div>
    </div>

    <div id="page-content">
        <table class="table" id="exp">
        </table>
    </div>
</div>

<div id="dialog-add-presale" class="hide">
    <form id="form-add-presale" action="/template/add" method="post" class="mrg10A">
        <div class="row">
            <div class="col-md-6">
                <div class="form-row">
                    <div class="form-label col-md-4">
                        <label for="">模板名称:</label>
                    </div>
                    <div class="form-input col-md-8">
                        <input placeholder="" type="text" name="ticker" data-required="true" data-rangelength="[1,45]" class="parsley-validated">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-row">
                    <div class="form-label col-md-4">
                        <label for="">模板类型:</label>
                    </div>
                <#--<input placeholder="" type="text" name="phone" data-rangelength="[1,45]">-->
                    <div class="form-input col-md-8">
                        <select size="1" name="display_type" aria-controls="exp">
                            <option value="notification"  selected="selected">通知</option>
                        <#--<option value="message">消息</option>-->
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-row">
                    <div class="form-label col-md-4">
                        <label for="">内容:</label>
                    </div>
                    <div class="form-input col-md-8">
                        <input placeholder="" type="text" name="title" data-required="true" data-rangelength="[1,45]" class="parsley-validated" />
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-row">
                    <div class="form-label col-md-4">
                        <label for="">备注:</label>
                    </div>
                    <div class="form-input col-md-8">
                        <select size="1" name="productionMode" aria-controls="exp">
                            <option value="true"  selected="selected">正式模式</option>
                            <option value="false">测试模式</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script language="JavaScript">
    $(document).ready(function () {

        function retrieveData(sSource, aoData, fnCallback) {
            aoData.push({ });
            $.ajax({
                "type": "POST",
                "contentType": "application/json",
                "url": sSource,
                "dataType": "json",
                "data": JSON.stringify(aoData), //以json格式传递
                "success": fnCallback
            });
        }


        $(function () {
            $("#exp").dataTable({
                sScrollY: 300,
                bJQueryUI: !0,
                bStateSave: true,
                sPaginationType: "full_numbers",
                aoColumns: [
                    {'sTitle': 'id', 'mDataProp': 'id', "bVisible": false},
                    {'sTitle': '模板名称', 'mDataProp': 'name'},
                    {'sTitle': '模板类型', 'mDataProp': 'type'},
                    {'sTitle': '备注', 'mDataProp': 'remark'},
                    {'sTitle':'创建日期','mDataProp':'createDate','mRender':function(data, type, full){
                        return new Date(data).Format("yyyy-MM-dd");
                    }},
                    {'sTitle': '操作', 'bSortable': false, 'mRender': function (data, type, full) {
                        var html = '<div class="dropdown">';
                        html += '<a href="javascript:;" title="" class="btn medium bg-blue" data-toggle="dropdown">';
                        html += '<span class="button-content">';
                        html += '<i class="glyph-icon font-size-11 icon-cog"></i>';
                        html += '<i class="glyph-icon font-size-11 icon-chevron-down"></i>';
                        html += '</span>';
                        html += '</a>';
                        html += '<ul class="dropdown-menu float-right">';
                        html += '<li><a href="/products/template/update/' + full.id + '" title=""><i class="glyph-icon icon-edit mrg5R"></i>修改</a></li>';
                        html += '<li class="divider"></li>';
                        html += '<li><a href="javascript:;" id="' + full.id + '" class="font-red del" title=""><i class="glyph-icon icon-remove mrg5R"></i>删除</a> </li>';
                        html += '';
                        html += '';
                        html += '';
                        html += '</ul>';
                        html += '</div>';
                        return html;
                    }},
                ],
                "bServerSide": true,
                "sAjaxSource": "../templates/ajax",
                "fnServerData": retrieveData,
                "oLanguage": {
                    "sInfoEmpty": "没有数据",
                    "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                    "sZeroRecords": "没有检索到数据",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "前页",
                        "sNext": "后页",
                        "sLast": "尾页"
                    }
                },

                "fnDrawCallback": function () {
                    $(".del").click(function (a) {
                        $.messager.confirm("", "是否确认删除该模板？", function () {
                            location.href = "/products/template/delete/" + a.delegateTarget.id;
                        });
                    });
                },

                "bRetrieve": true,
                "aoColumnDefs": [
                    {
                        sDefaultContent: '',
                        aTargets: [ '_all' ]
                    }
                ]

            })
        })
        $(document).on("scroll", ".dataTables_scrollBody", function () {
            $(".dataTables_scrollBody").css({"overflow": "visible", "height": "100%"})
        })
    });

</script>